
.main {
    margin: 0 auto;
    width: var(--app-width-size);
    text-align: left;
}

.cmdbox {
    width: 100%;
    height: var(--search-input-height);
    padding: 0 8px;
    border: 0;
    font-size: var(--search-input-value-text-size);
    color: var(--search-input-value-text-color);
    background-color: var(--app-background-color);

    &:focus {
        outline: 0;
    }
}

.ec-itemList {
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;

    height: var(--search-results-height);

    background: var(--app-background-color);
    border: 0;
}

.ec-item {
    display: flex;
    overflow: hidden;
    align-items: center;
    padding: 3px 8px;
    height: var(--suggestion-height);
    position: relative;
    border-bottom: 1px solid var(--suggestion-border-color);

    .lazy {
        visibility: hidden;
    }
}

.ec-item-icon {
    display: block;
    width: 25px;
    min-width: 25px;
    height: 25px;
    margin-right: 8px;

    &.icon-enter {
        display: none;
        margin-right: 0;
        margin-left: 8px;
    }
}


.ec-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: calc(var(--app-width-size) - 84px);
    max-width: calc(var(--app-width-size) - 84px);

    &.nodesc {
        .ec-item-title {
            line-height: 33px;
            font-size: 20px;
        }
    }

    > span {
        display: block;
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}

.ec-item-title {
    color: var(--suggestion-title-text-color);
    font-size: var(--suggestion-title-text-size);
    line-height: 1.4;
    font-weight: var(--suggestion-title-text-weight);

    &.ec-item-warn {
        color: var(--highlighted-suggestion-text-color);
    }
}

.ec-item-desc {
    color: var(--suggestion-subtitle-text-color);
    font-size: var(--suggestion-subtitle-text-size);
    font-family: var(--suggestion-subtitle-text-style);
}

.ec-item {
    &.ec-item-select {
        background: var(--selected-suggestion-background-color);
    
        .lazy {
            visibility: visible;
        }
    
        .ec-item-icon {
            &.icon-enter {
                display: block;
            }
        }
    
        .ec-item-title {
            color: var(--selected-suggestion-title-text-color);
        
            &.ec-item-warn {
                color: var(--highlighted-suggestion-text-color);
            }
        }
    
        .ec-item-desc {
            color: var(--selected-suggestion-subtitle-text-color);
        }
    }
}


/* scrollbar styles */
::-webkit-scrollbar {
    width: var(--search-results-scrollbar-width);
    height: 8px;
}

::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end {
    display: none;
}

::-webkit-scrollbar-track-piece {
    -webkit-border-radius: 0;
    background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
    width: 50px;

    -webkit-border-radius: 8px;
    outline: 1px solid #ccc;
    background-color: var(--search-results-scrollbar-color);
}

::-webkit-scrollbar-thumb:hover {
    background-color: #999999;
}
